<template>
  <div class="relative bg-white h-screen">
    <div class="max-w-7xl mx-auto">
      <div class="relative z-10 pb-8 bg-white sm:pb-6 md:pb-8 lg:w-full lg:pb-10 xl:pb-12">
        <Popover>
          <div class="relative pt-6 px-4 sm:px-6 lg:px-8">
            <nav
              class="relative flex items-center justify-between sm:h-10 lg:justify-start"
              aria-label="Global"
            >
              <div class="flex items-center flex-grow flex-shrink-0 lg:flex-grow-0">
                <div class="flex items-center justify-between w-full md:w-auto">
                  <a href="#">
                    <img class="h-8 w-auto sm:h-10" src="../src/assets/image/logo.png" />
                  </a>
                  <div class="flex items-center">
                    <PopoverButton
                      @click="isShowing = true"
                      class="visible md:invisible bg-white rounded-none p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500"
                    >
                      <MenuIcon class="h-6 w-6" aria-hidden="true" />
                    </PopoverButton>
                  </div>
                </div>
              </div>
              <div class="hidden md:block ml-auto pr-4 space-x-8">
                <a
                  v-for="item in navigation"
                  :key="item.name"
                  :href="item.href"
                  class="font-medium text-gray-500 hover:text-gray-900"
                >{{ item.name }}</a>
              </div>
            </nav>
          </div>
          <TransitionRoot
            :show="isShowing"
            enter-active-class=" transition duration-500 delay-100 ease-in"
            enter-from-class="opacity-0"
            enter-to-class="opacity-100"
            leave-active-class=" transition duration-500 delay-100 ease-out"
            leave-from-class="opacity-100"
            leave-to-class="opacity-0"
          >
            <PopoverPanel
              class="absolute z-10 top-0 inset-x-0 p-2 transition transform origin-top-right md:hidden"
            >
              <div
                class="shadow-md bg-white rounded-none ring-1 ring-black ring-opacity-5 overflow-hidden"
                ref="target"
              >
                <div class="px-5 pt-4 flex items-center justify-between">
                  <div>
                    <img class="h-8 w-auto" src="../src/assets/image/logo.png" />
                  </div>
                  <div class="-mr-2">
                    <PopoverButton
                      @click="isShowing = false"
                      class="bg-white rounded-none p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500"
                    >
                      <span class="sr-only">Close menu</span>
                      <XIcon class="h-6 w-6" aria-hidden="true" />
                    </PopoverButton>
                  </div>
                </div>
                <div class="px-2 pt-2 pb-3 space-y-1">
                  <a
                    v-for="item in navigation"
                    :key="item.name"
                    :href="item.href"
                    class="block px-3 py-2 rounded-none text-sm font-medium text-gray-700 hover:text-gray-900 hover:bg-blue-50"
                  >{{ item.name }}</a>
                </div>
              </div>
            </PopoverPanel>
          </TransitionRoot>
        </Popover>
      </div>
    </div>
    <div :ref="setItemRef" class="transition duration-500 delay-100 ease-in">
      <swiper
        :modules="modules"
        :slides-per-view="1"
        :space-between="50"
        :pagination="{ clickable: true }"
        :scrollbar="{ draggable: true }"
        @swiper="onSwiper"
        @slideChange="onSlideChange"
      >
        <swiperSlide>
          <img src="../src/assets/image/banner.png" />
        </swiperSlide>
      </swiper>
    </div>
    <div class="h-40 shadow-lg flex items-center justify-center">
      <div class="flex flex-col items-center flex-1">
        <img src="../src/assets/image/icon-people.png" alt />
        <span class="text-3xl inline-flex mt-2 relative">
          1852
          <span class="text-blue-400 text-xs ml-1 absolute -right-6">万+</span>
        </span>
        <span class="text-sm text-gray-500 mt-1">用户数</span>
      </div>
      <div class="flex flex-col items-center">
        <img src="../src/assets/image/icon-file.png" alt />
        <span class="text-3xl inline-flex mt-2 relative">
          8789
          <span class="text-blue-400 text-xs ml-1 absolute -right-6">万+</span>
        </span>
        <span class="text-sm text-gray-500 mt-1">资源数量</span>
      </div>
      <div class="flex flex-col items-center flex-1">
        <img src="../src/assets/image/org-icon.png" alt />
        <span class="text-3xl inline-flex mt-2 relative">
          300
          <span class="text-blue-400 text-xs ml-1 absolute -right-3">+</span>
        </span>
        <span class="text-sm text-gray-500 mt-1">服务机构</span>
      </div>
    </div>
    <main class="mt-10 mx-auto max-w-7xl px-4 sm:mt-12 sm:px-6 md:mt-8 lg:mt-10 lg:px-6 xl:mt-12">
      <div class="box-xl transition duration-500 delay-100 ease-in-out" :ref="setItemRef">
        <div class="text-2xl font-bold text-center">三分钟了解数字化综合服务运营平台</div>
        <div
          class="my-5 flex text-gray-600 text-base text-center w-full items-center justify-center"
        >
          <span>整合资源</span>
          <span class="mx-7">数据共享</span>
          <span>相互导流</span>
        </div>
        <div
          class="text-sm text-center mt-1 text-gray-500 mb-8"
        >统一资源入口,统一用户服务中心,统一品牌和统一运营,结合融合出版产品建设全流程,建立互补、完整的产品线</div>
      </div>
      <video
        controls="controls"
        class="w-300 m-auto h-70 md:h-100"
        src="https://minio.cjszyd.cn/default/szyun/video/%E5%8F%A4%E7%AD%9D%E7%AC%AC%E4%BA%8C%E8%AF%BE.mp4?Content-Disposition=attachment%3B%20filename%3D%22szyun%2Fvideo%2F%E5%8F%A4%E7%AD%9D%E7%AC%AC%E4%BA%8C%E8%AF%BE.mp4%22&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=ggwh_minio%2F20211203%2F%2Fs3%2Faws4_request&X-Amz-Date=20211203T031458Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=8f1c8e5164b9be6dae65db4c3398089ec0d1a3140b2f99f514d4b56acb24f4e4"
      >您的浏览器不支持 video 标签。</video>

      <div class="my-7 box-xl transition duration-500 delay-100 ease-in-out" :ref="setItemRef">
        <div class="text-2xl font-bold text-center">出版行业量身定制数字化转型</div>
        <div
          class="my-5 flex text-gray-600 text-base text-center w-full items-center justify-center"
        >
          <span>有形纸书</span>
          <span class="mx-7">数字内容</span>
          <span>深度融合</span>
        </div>
        <div
          class="text-sm text-center mt-1 text-gray-500 mb-8"
        >针对作者、编辑、出版、运营在出版过程中遇到的问题，量身定制数字化平台+移动应用+盈利模式的新商业生态</div>
      </div>

      <div class="my-7 box-xl transition duration-500 delay-100 ease-in-out" :ref="setItemRef">
        <div class="text-2xl font-bold text-center">全新知识服务体验 读者多种资源触手可达</div>
        <div
          class="my-5 flex text-gray-600 text-base text-center w-full items-center justify-center"
        >
          <span>便捷</span>
          <span class="mx-7">深入</span>
          <span>高效</span>
          <span class="mx-7">即时</span>
          <span>习惯</span>
        </div>
      </div>
      <div
        class="cursor-pointer my-7 box-xl transition duration-500 delay-100 ease-in-out"
        :ref="setItemRef"
      >
        <div class="grid grid-cols-1 gap-y-8 md:grid-cols-3 xl:grid-cols-5 xl:gap-8">
          <div
            class="rounded-lg w-60 flex p-10 flex-col m-auto items-center shadow-lg md:hover:shadow-2xl md:shadow-none"
            @mouseenter="activityId = 1"
            @mouseleave="activityId = 0"
          >
            <img src="../src/assets/image/easy.png" alt v-show="activityId === 1" />
            <img src="../src/assets/image/easy-gary.png" alt v-show="activityId !== 1" />
            <span class="mt-2 text-lg font-bold">便捷</span>
            <span class="my-4 text-gray-500">轻松获取阅读内容</span>
            <span class="text-sm text-gray-400">微信扫描二维码,即可在手机查看资源内容</span>
          </div>
          <div
            class="rounded-lg w-60 flex p-10 flex-col m-auto items-center shadow-lg md:hover:shadow-2xl md:shadow-none"
            @mouseenter="activityId = 2"
            @mouseleave="activityId = 0"
          >
            <img src="../src/assets/image/deep-m.png" alt v-show="activityId === 2" />
            <img src="../src/assets/image/deep.png" alt v-show="activityId !== 2" />
            <span class="mt-2 text-lg font-bold">深入</span>
            <span class="my-4 text-gray-500">阅读深度无限延伸</span>
            <span class="text-sm text-gray-400">知识内容不止局限于书本,更有海量拓展内容</span>
          </div>
          <div
            class="rounded-lg w-60 flex p-10 flex-col m-auto items-center shadow-lg md:hover:shadow-2xl md:shadow-none"
            @mouseenter="activityId = 3"
            @mouseleave="activityId = 0"
          >
            <img src="../src/assets/image/time-m.png" alt v-show="activityId === 3" />
            <img src="../src/assets/image/time.png" alt v-show="activityId !== 3" />
            <span class="mt-2 text-lg font-bold">即时</span>
            <span class="my-4 text-gray-500">线上线下资源融合</span>
            <span class="text-sm text-gray-400">结合移动端，充分应对不同场景的学习需求</span>
          </div>
          <div
            class="rounded-lg w-60 flex p-10 flex-col m-auto items-center shadow-lg md:hover:shadow-2xl md:shadow-none"
            @mouseenter="activityId = 4"
            @mouseleave="activityId = 0"
          >
            <img src="../src/assets/image/rocket-m.png" alt v-show="activityId === 4" />
            <img src="../src/assets/image/rocket.png" alt v-show="activityId !== 4" />
            <span class="mt-2 text-lg font-bold">高效</span>
            <span class="my-4 text-gray-500">提高阅读学习效率</span>
            <span class="text-sm text-gray-400">专人讲解知识内容，提高对书本知识的理解</span>
          </div>
          <div
            class="rounded-lg w-60 flex p-10 flex-col m-auto items-center shadow-lg md:hover:shadow-2xl md:shadow-none"
            @mouseenter="activityId = 5"
            @mouseleave="activityId = 0"
          >
            <img src="../src/assets/image/hob-m.png" alt v-show="activityId === 5" />
            <img src="../src/assets/image/hob.png" alt v-show="activityId !== 5" />
            <span class="mt-2 text-lg font-bold">习惯</span>
            <span class="my-4 text-gray-500">优秀阅读习惯养成</span>
            <span class="text-sm text-gray-400">积分激励多种应用，培养读者的习惯养成</span>
          </div>
        </div>
      </div>
      <div class="my-7 box-xl transition duration-500 delay-100 ease-in-out" :ref="setItemRef">
        <div class="text-2xl font-bold text-center">应用案例</div>
        <div
          class="my-5 flex text-gray-600 text-base text-center w-full items-center justify-center"
        >
          <span>完整的系统策划及设计,标准的开发流程管理,专业的技术支持</span>
        </div>
      </div>
      <div class="grid grid-cols-1 gap-y-8 md:grid-cols-3 mt-17">
        <div
          class="cursor-pointer rounded-lg w-70 flex flex-col m-auto items-center shadow-lg md:hover:shadow-2xl md:shadow-none"
        >
          <img src="../src/assets/image/expm-1.png" alt />
          <div class="delay-300 animate-fade-in-up-big p-6 text-xl font-bold bg-gray-50">
            鄂教综合实践APP
            <span
              class="text-sm block mt-4 text-gray-500"
            >湖北教育出版社倾心打造的中小学综合实践服务平台的APP端应用；在这里你能挑选你所喜爱的实践基地、实践活动，并预约报名；在这里你能分享你的见闻</span>
            <span class="text-sm block mt-4 text-gray-500">查看更多-></span>
          </div>
        </div>
        <div
          class="cursor-pointer rounded-lg w-70 flex flex-col m-auto items-center shadow-lg md:hover:shadow-2xl md:shadow-none"
        >
          <img src="../src/assets/image/expm-2.png" alt />
          <div class="delay-300 animate-fade-in-up-big p-6 text-xl font-bold bg-gray-50">
            鄂教综合实践APP
            <span
              class="text-sm block mt-4 text-gray-500"
            >湖北教育出版社倾心打造的中小学综合实践服务平台的APP端应用；在这里你能挑选你所喜爱的实践基地、实践活动，并预约报名；在这里你能分享你的见闻</span>
            <span class="text-sm block mt-4 text-gray-500">查看更多-></span>
          </div>
        </div>
        <div
          class="cursor-pointer rounded-lg w-70 flex flex-col m-auto items-center shadow-lg md:hover:shadow-2xl md:shadow-none"
        >
          <img src="../src/assets/image/expm-3.png" alt />
          <div class="delay-300 animate-fade-in-up-big p-6 text-xl font-bold bg-gray-50">
            鄂教综合实践APP
            <span
              class="text-sm block mt-4 text-gray-500"
            >湖北教育出版社倾心打造的中小学综合实践服务平台的APP端应用；在这里你能挑选你所喜爱的实践基地、实践活动，并预约报名；在这里你能分享你的见闻</span>
            <span class="text-sm block mt-4 text-gray-500">查看更多-></span>
          </div>
        </div>
      </div>
      <div class="text-center text-blue-500 my-10 cursor-pointer animate-bounce">查看更多</div>

      <div class="my-7 box-xl transition duration-500 delay-100 ease-in-out" :ref="setItemRef">
        <div class="text-2xl font-bold text-center">入驻机构</div>
        <div
          class="my-5 flex text-gray-600 text-base text-center w-full items-center justify-center"
        >
          <span>开启出版融合量身定制，赢得市场先机</span>
        </div>
      </div>
<!--  animated  bounce -->
      <div class="grid grid-cols-1 md:grid-cols-2 mt-10 xl:grid-cols-4">
        <div class="flex items-center justify-center"  :ref="setAnimated">
          <img src="../src/assets/image/org-1.png" alt="" class="">
        </div>
         <div class="flex items-center justify-center" :ref="setAnimated">
          <img src="../src/assets/image/org-2.png" alt="" class="">
        </div>
         <div class="flex items-center justify-center" :ref="setAnimated">
          <img src="../src/assets/image/org-3.png" alt="" class="">
        </div>
         <div class="flex items-center justify-center" :ref="setAnimated">
          <img src="../src/assets/image/org-4.png" alt="" class="">
        </div>
         <div class="flex items-center justify-center" :ref="setAnimated">
          <img src="../src/assets/image/org-5.png" alt="" class="">
        </div>
         <div class="flex items-center justify-center" :ref="setAnimated">
          <img src="../src/assets/image/org-6.png" alt="" class="">
        </div>
         <div class="flex items-center justify-center" :ref="setAnimated">
          <img src="../src/assets/image/org-7.png" alt="" class="">
        </div>
         <div class="flex items-center justify-center" :ref="setAnimated">
          <img src="../src/assets/image/org-8.png" alt="" class="">
        </div>
      </div>
    </main>
  </div>
</template>

<script lang="ts">
import { onClickOutside, useStorage } from '@vueuse/core'
import {
  Popover,
  PopoverButton,
  PopoverPanel
} from '@headlessui/vue'
import {
  MenuIcon,
  XIcon
} from '@heroicons/vue/outline'
import {
  TransitionRoot
} from '@headlessui/vue'
import {
  getCurrentInstance,
  onBeforeUpdate,
  onMounted,
  onUnmounted,
  reactive,
  ref,
  toRefs
} from 'vue'
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Navigation, Pagination, A11y, } from 'swiper';
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import { useStore } from 'vuex'
import { log } from 'console'
// import { useGlobalState } from './store'
const navigation = [{
  name: '首页',
  href: '#'
},
{
  name: '产品与服务',
  href: '#'
},
{
  name: '行业案例',
  href: '#'
},
{
  name: '关于我们',
  href: '#'
},
]
export default {
  components: {
    Popover,
    TransitionRoot,
    PopoverButton,
    PopoverPanel,
    MenuIcon,
    XIcon,
    Swiper,
    SwiperSlide,
  },
  setup() {
    const isShowing = ref(false)
    const activityId = ref(0)
    const target = ref(null)
    const store = useStore();
    const reactiveData = reactive({
      itemRefs: [],
      animatedRefs:[]
    })
    const {
      itemRefs,
      animatedRefs
    } = toRefs(reactiveData)



    onBeforeUpdate(() => {
      reactiveData.itemRefs = [];
    })

    onMounted(() => {
      document.addEventListener('scroll', handleScroll)
      handleScroll(1)
    })

    onUnmounted(() => {
      document.removeEventListener('scroll', handleScroll)
    })



    const handleScroll = (evt: any) => {
      for (var i = 0; i < reactiveData.itemRefs.length; i++) {
        let elem: any = reactiveData.itemRefs[i]
        if (isElemVisible(elem)) {
          elem.style.opacity = '1'
          elem.style.transform = 'scale(1)'
        } else {
          elem.style.opacity = '0'
        }
      }
      for (var i = 0; i < reactiveData.animatedRefs.length; i++) {
        let elem: any = reactiveData.animatedRefs[i]
        if (isElemVisible(elem)) {
          elem.className =elem.className.indexOf(' animated  bounce')>0 ? elem.className: elem.className +' animated  bounce'
        } else {
          elem.className = 'flex items-center justify-center'
        }
      }
    }

    onClickOutside(target, (event) => isShowing.value = false)

    const isElemVisible = (el: any) => {
      var rect = el.getBoundingClientRect()
      var elemTop = rect.top + 50
      var elemBottom = rect.bottom
      return elemTop < window.innerHeight && elemBottom >= 0
    }

    const setItemRef = (el: any) => {
      if (el) {
        reactiveData.itemRefs.push(el)
      }
    }
    const setAnimated = (el: any) => {
      if (el) {
        reactiveData.animatedRefs.push(el)
      }
    }
  
    const onSwiper = (swiper: any) => {
    };

    const onSlideChange = () => {
    };

    return {
      navigation,
      isShowing,
      itemRefs,
      setItemRef,
      onSwiper,
      onSlideChange,
      activityId,
      target,
      setAnimated,
      modules: [Navigation, Pagination, A11y],
    }
  },
}
</script>
<style>
.box-xl {
  opacity: 0;
  /* transition: 0.3s all ease-out; */
  transform: scale(0.8);
}
</style>